<template>
	<view>
		<view class="content">
				<qiun-data-charts type="column" :chartData="Column" />
				<qiun-data-charts type="column" :chartData="Column"></qiun-data-charts>
		</view>
		
		<view class="charts-box">
		  <qiun-data-charts type="line" :chartData="Line"/>
		</view>
		<view class="charts-box">
		  <qiun-data-charts type="pie" :chartData="Pie"/>
		</view>
		<view style="width: 100%;height: 500px;">
		  <qiun-data-charts type="column" :opts="{rotate:true}" :chartData="Column2" />
		</view>
	</view>
</template>

<script>
	import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts";
	import api from 'commer/apiURL.js'
	export default {
		data() {
			return {
				base: api.baseurl,
				reactive: [],
				Column2: {
					"categories": [],
					"series": [{
						"name": "商家菜品平均价格占该商家菜品总价的百分比",
						"data": [3.523, 3.612, 4.123, 3.322, 1.311]
					}]
				},
				Column: {
					"categories": [],
					"series": [{
						"name": "男",
						"data": [35, 36, 31, 33, 13]
					}, {
						"name": "女",
						"data": [18, 27, 21, 24, 6]
					}]
				},
				Line: {
					"categories": ["甘A","甘B","甘C"],
					"series": [{
						"name": "拍照所在地统计数",
						"data": [10,20,30]
					}]
				},
				Pie: {
				  "series": [{
				    "name": "一班",
				    "data": 50
				  }, {
				    "name": "二班",
				    "data": 30
				  }, {
				    "name": "三班",
				    "data": 20
				  }, {
				    "name": "四班",
				    "data": 18
				  }, {
				    "name": "五班",
				    "data": 8
				  }]
				},
			}
		},
		onLoad() {
			this.getxinwen()
			this.getzhaop()
			this.getxiao()
		},
		methods: {
			getxinwen() {
				this.$get(this.base + '/prod-api/press/press/list').then((res) => {
					this.reactive = []
					this.reactive = res.rows.slice(50, 55)
					console.log(this.reactive)
					this.reactive.forEach((item) => {
						this.Column.categories.push(this.fillstr(item.title))
					})
				})
			},
			getzhaop(){
				this.$get(this.base + '/prod-api/api/job/post/list').then((res) => {
					let reactive = []
					reactive = res.rows
					this.Pie.series = []
					reactive.forEach((item) => {
						this.Pie.series.push({
							name:item.professionName,
							data:item.id
						})
					})
					
				})
			},
			getxiao(){
				this.$get(this.base+'/prod-api/api/takeout/seller/list').then((res)=>{		
					let reactive = []
					reactive = this.arr(res.rows).slice(0,5)
					console.log(reactive)
					reactive.forEach((item) => {
						this.Column2.categories.push(this.fillstr(item.name))
					})
				
				})
			},
			arr(arr){
				for(var i = 0;i<arr.length-1;i++){
					for(var j = 0;j<arr.length-1;j++){
						if(arr[j].saleQuantity <arr[j+1].saleQuantity){
							let str = arr[j]
							arr[j] = arr[j+1]
							arr[j+1] = str
						}
					}
				}
				return arr
			},
			fillstr(str1){
				var str = str1.replace(/<[^>]+>/g,'')
				return str.length >6?str.substring(0,3)+'...':str
			},
		}
	}
</script>

<style>
	.charts-box {
	  width: 100%;
	  height: 300px;
	}
	.content {
	  display: flex;
	  flex-direction: column;
	  flex: 1;
	}
</style>
